<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1="num1" :number2="num2"
       @num2change="num2change"
       @num1change="num1change"></cpn>
</div>

<template id="tcpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>子组件data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1" >
    <h2>props:{{number2}}</h2>
    <h2>子组件data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2"  >
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      num1:1,
      num2:0
    },
    methods:{
      num2change(value){
        // 传过来的值是一个字符串，要转换成number类型
        this.num2= parseInt(value);
        this.num1=value/100;
      },
      num1change(value){
        this.num1= parseInt(value);
        this.num2=value*100
      }
    },
    components:{
      cpn:{
        template:'#tcpn',
        props:{
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        /*
        *  watch:属于组件里面的某个属性，跟data并列关系，用于监听某些属性的改变
        * */
        watch:{
          // 监听哪个属性，就写个属性名命名的函数
          // dnumber1(newValue,oldValue) ：两个参数
          dnumber1(newValue){
            // 一旦监听到dnumber1的值有改变，就把新的值*100赋值给dnumber2
            // 同时，一旦dnumber2从新赋值了，dnumber2（）{}就能监听到
            this.dnumber2=newValue*100;
            this.$emit('num1change',newValue);
          },
          dnumber2(newValue){
            this.dnumber1=newValue/100;
            this.$emit('num2change',newValue);
          }
        }
      }
    }
  })

</script>
</body>
</html>